<template>
    <div class="ActivityList">
        <div class="table-handle">
            <a-button type="primary" @click="handleAppend">新增</a-button>
        </div>
        <a-table :dataSource="dataSource" :columns="columns" >
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'operation'">
                    <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
                </template>
            </template>
        </a-table>
    </div>
</template>

<script setup>
import { ref } from 'vue';

import { useRouter } from 'vue-router';

const router = useRouter();

const dataSource = ref([]);
const columns = ref([
    { title: '活动ID', dataIndex: 'id', key: 'name' },
    { title: '活动名称', dataIndex: 'name', key: 'name' },
    { title: '操作', dataIndex: 'operation' },
]);

const handleAppend = () => {
    router.push('/editor')
}
const handleEdit = (id) => {
    router.push({
        path: '/editor',
        query: {
            id
        }
    })
}

</script>

<style lang="less" scoped>
.ActivityList{
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
    .table-handle{
        display: flex;
        justify-content: end;
        margin-bottom: 20px;
    }
}
</style>